<template>
  <div id="now">
    <ul>
    	<li v-for="item in nowPlayData" :key="item.id">
			<div class="img-wraper"><img :src="item.img" ></div>
			<div class="desc-wraper">
				<p class="name">{{item.name}}</p>
				<p><span class="desc-color">{{item.score}}人想看</span><span class="score"></span></p>
				<p class="desc-color actors">{{item.actors}}</p>
				<p class="desc-color">未来30天内上映</p>
			</div>
			<div class="button-wraper">
				<button>预售</button>
			</div>
		</li>
    </ul>
  </div>
</template>
<script>
export default{
	name: 'Now',
	data(){
		return {
			nowPlayData: []
		}
	},
	created(){
		this.getNowPlayData();
	},
	methods: {
		getNowPlayData(){
			// var that = this;
			axios.get('/mock/coming.json')
			  .then(response => {
			    console.log(response);
				if(response.status == 200){
					if(response.data && response.data.nowPlayData){
						this.nowPlayData = response.data.nowPlayData;
					}
				}
			  })
			  .catch(function (error) {
			    console.log(error);
			  });
		}
	}
}
</script>
<style scoped>
	.button-wraper{
		float: right;
		line-height: 80px;
	}
	img{
		width: 70px;
	}
	.img-wraper{
		width: 23%;
		margin-bottom: 10px;
		float: left;
	}
	.desc-wraper{
		width: 60%;
		float: left;
	}
	li{
		margin: 15px;
		/* 清除浮动 */
		overflow: hidden;
		border-bottom: 1px solid #CCCCCC;
	}
	.desc-color{
		color: #666;
		font-size: 14px;
	}
	.name{
		font-size: 18px;
		font-weight: bold;
	}
	.score{
		color: #FF9900;
		font-weight: bold;
		margin-left: 5px;
	}
	.actors{
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	p{
		line-height: 25px;
	}
	button{
		width: 50px;
		height: 30px;
		color: white;
		background-color: #3f7fbf;
		border-radius: 5px;
		border: none;
		font-weight: bold;
	}
</style>